<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

    <script type="text/javascript" src="../../../resources/lib/bui/js/jquery-1.8.1.min.js"
            th:src="@{/resources/lib/bui/js/jquery-1.8.1.min.js}"></script>
    <script type="text/javascript" src="../../../resources/alarm/js/websocket.js"
            th:src="@{/resources/alarm/js/websocket.js}"></script>
    <script th:inline="javascript" type="text/javascript">
        /*<![CDATA[*/
        /**
         * 应用程序URL根路径
         * @type {string}
         * @const
         */
        var BASE_URL = /*[[@{/}]]*/ '/';
        /*]]>*/
    </script>
</head>
<body>
<div>
    <form id="form">
        报警区域ID:
        <input type="text" value="0" name="alarmAreaID" /><br/>
        当前区域ID:
        <input type="text" value="0" name="fromAreaID" /><br/>
        目标区域ID：
        <input type="text" value="0" name="toAreaID" /><br/>
        报警类型ID:
        <input type="text" value="0" name="alarmTypeID" />
    </form>
    <input type="button" value="发送" onclick="start()" />
</div>
<div id="messages"></div>
<script type="text/javascript">

    AlarmController.init('ws://' + window.location.host + BASE_URL + '/map')
            .onNewAlarm(function(data){
                console.log(data);
            })
            .onAlarmChange(function(data){
                console.log(data);
            });

    //    var webSocket = new WebSocket('ws://'+window.location.host+BASE_URL+'/alarm');
    //
    //    webSocket.onerror = function(event) {
    //        console.log(event);
    //        alert(event);
    //    };
    //
    //    webSocket.onclose = function(event) {
    //        console.log(event);
    //    }
    //
    //    webSocket.onopen = function(event) {
    //        $('#messages').html('Connection established');
    //    };
    //
    //    webSocket.onmessage = function(event) {
    //        $('#messages').html( '<br />' + event.data);
    //    }

    $.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
    function start() {
        //console.log($('#form').serializeObject());
        AlarmController.send(JSON.stringify($('#form').serializeObject()));
    }
</script>
</body>
</html>